<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 style="color: red;">{{message}}</h1>  <!-- View： 如何显示数据   -->
			<h2>{{message2}}</h2>
			<p>{{content}}</p>
			
		</div>
		<div>
            <ul>
                <li>第一行：內容是*******</li>
                <li>第二行：內容是*******</li>
                <li>第三行：內容是*******</li>
                <li>第四行：內容是*******</li>
                <li>第五行：內容是*******</li>
            </ul>
        </div>
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>性別</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>看看01</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>看看01</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>看看01</td>
            <td>18</td>
            <td>男</td>
        </tr>

        </tbody>
    </table>
	</body>

	<script type="text/javascript">
		// 创建一个Vue实例
		
		var model = {   //  model : 存储数据
			message:'Hello World!',
			message2:'aaaaaaaa',
			content:'xxxxxxxxxx',
		}
		
		var app = new Vue({el:'#app',data:model});  // 建立绑定
	</script>
</html>
